import { Link, useNavigate } from 'react-router-dom'
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, Table, Tag, Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
// import 'moment/locale/ah-cn'
import locale from 'antd/es/date-picker/locale/zh_CN'
import './index.scss'
import { useEffect, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { http } from '@/uitls'
import { useStore } from '@/store'
const { Option } = Select
const { RangePicker } = DatePicker
const Article = () => {
   const {channelStore} = useStore()
   console.log("channelStore",channelStore)
    //文章列表管理
    const [articleData, setArticleData] = useState({
        list: [],//文章列表
        count: 0//文章数量
    })

    //文章参数管理
    const [params, setParams] = useState({
        page: 1,
        per_page: 10
    })

    useEffect(() => {
        const loadList = async () => {
            const res = await http.get('/mp/articles', { params })

            let { results, total_count } = res.data
            console.log(results, "9999")
            setArticleData({
                list: results,
                count: total_count
            })
        }
        loadList()
    }, [params])

    const onFinish = (values) => {
        console.log('Success:', values);
        const { status, channel_id, date } = values
        const param = {}
        if (status !== -1) {
            param.status = status
        }
        if (channel_id) {
            param.channel_id = channel_id
        }
        if (date) {
            param.begin_pubdate = date[0].format('YYYY-MM-DD')
            param.end_pubdate = date[1].format('YYYY-MM-DD')
        }
        console.log(param, "66666")
        //修改params数据触发 从新查询接口
        setParams({
            ...params,
            ...param
        })
    }
    //分页
    const pageChange = (page) => {
        setParams({
            ...params,
            page
        })
    }
    //删除
    const delAryicle = async (data) => {
        console.log(data)
        await http.delete(`/mp/articles/${data.id}`)
        setParams({
            ...params,
            page:1
        })
    }
    //跳转发布页
    const navigate = useNavigate()
    const goPublish = (data) => {
        console.log(data)
        navigate(`/publish?id=${data.id}`)

    }
    const data = [
        {
            "id": "ece50486-8cea-4ca8-92ec-a513cc4cc82c",
            "title": "百度新闻",
            "status": 2,
            "comment_count": 0,
            "pubdate": "2022-10-21 10:05:30",
            "cover": {
                "type": 1,
                "images": [
                    "http://geek.itheima.net/uploads/1666317913724.png"
                ]
            },
            "like_count": 0,
            "read_count": 0
        },
        {
            "id": "ef2b40d5-3111-4ea0-95b8-53821d41332b",
            "title": "NEWS",
            "status": 2,
            "comment_count": 0,
            "pubdate": "2022-10-21 10:03:19",
            "cover": {
                "type": 1,
                "images": [
                    "http://geek.itheima.net/uploads/1666317764132.png"
                ]
            },
            "like_count": 0,
            "read_count": 0
        },
        {
            "id": "5225fa00-d752-40a2-acff-0126777fd3b7",
            "title": "12121",
            "status": 2,
            "comment_count": 0,
            "pubdate": "2022-10-21 09:51:22",
            "cover": {
                "type": 1,
                "images": [
                    "http://geek.itheima.net/uploads/1666317079719.jpg"
                ]
            },
            "like_count": 0,
            "read_count": 0
        },
        {
            "id": "211a5e2a-77a7-4106-948b-aa2ad46f8ca6",
            "title": "测试",
            "status": 2,
            "comment_count": 0,
            "pubdate": "2022-10-21 09:40:24",
            "cover": {
                "type": 1,
                "images": [
                    "http://geek.itheima.net/uploads/1666316419329.jpg"
                ]
            },
            "like_count": 0,
            "read_count": 0
        }
    ]
    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            render: cover => {
                return <img src={cover.images[0] || ''} width={200} height={150} alt=""></img>
            }
        }, {
            title: '标题',
            dataIndex: 'title',
            width: 220
        }, {
            title: '状态',
            dataIndex: 'status',
            render: data => <Tag color="green">审核通过</Tag>
        }, {
            title: '发布时间',
            dataIndex: 'pubdate'
        }, {
            title: '阅读数',
            dataIndex: 'read_count'
        }, {
            title: '操作',
            render: data => {
                return (
                    <Space>
                        <Button 
                        type='primary' shape="circle" 
                        onClick={()=>goPublish(data)}
                        icon={<EditOutlined />}></Button>
                        <Button
                            type='primary'
                            danger
                            shape='circle'
                            onClick={()=>delAryicle(data)}
                            icon={<DeleteOutlined />}
                        ></Button>
                    </Space>
                )
            }
        }
    ]
    return (
        <diV>
            <Card
                title={
                    <Breadcrumb separator=">">
                        <Breadcrumb.Item>
                            <Link to="/home">首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>内容管理</Breadcrumb.Item>
                    </Breadcrumb>
                }
                style={{ marginBottom: 20 }}
            >
                <Form
                    initialValues={{ status: -1 }}
                    onFinish={onFinish}
                >
                    <Form.Item label="状态" name="status">
                        <Radio.Group>
                            <Radio value={-1}>全部</Radio>
                            <Radio value={0}>草稿</Radio>
                            <Radio value={1}>待审核</Radio>
                            <Radio value={2}>审核通过</Radio>
                            <Radio value={3}>失败</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="频道" name="channel_id">
                        <Select
                            placeholder="请选择"
                            defaultValue="lucy"
                            style={{ width: 120 }}
                        >
                            {channelStore.channelList.map(channels => <Option key={channels.id} value={channels.id}>{channels.name}</Option>)}
                        </Select>
                    </Form.Item>
                    <Form.Item label="日期" name="date">
                        <RangePicker locale={locale}></RangePicker>
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' htmlType="submit" style={{ marginLeft: 80 }}>筛选</Button>
                    </Form.Item>
                </Form>
            </Card>
            <Card title={`查询到${articleData.count}条`}>
                <Table rowKey='id' columns={columns}
                    dataSource={articleData.list}
                    pagination={
                        {
                            pageSize: params.per_page,
                            total:articleData.count,
                            onChange:pageChange
                        }
                    }
                ></Table>
            </Card>
        </diV>
    )
}

export default observer(Article) 